<template>
	<view>
		<view style="background-color: white">
			<!-- 基础表单校验 -->
			<up-form :model="form" :rules="rules" label-width="90px" ref="formRef">
				<view class="form_part">
					<up-form-item label="操作描述" prop="text" border-bottom style="padding: 0 10px;">
						<up-input border="none" v-model="form.text" readonly></up-input>
					</up-form-item>
					<up-form-item v-if='unit == "0" || unit == "15"' label="货物数量" prop="goodsCount" border-bottom
						style="padding: 0 10px;">
						<up-input placeholder="请输入接单数量" border="none" v-model="form.goodsCount"></up-input>
					</up-form-item>
					<up-form-item label="车辆选择" prop="vehicleIds" border-bottom @click="selectCar"
						style="padding: 0 10px;">
						<up-input placeholder="请选择车辆" disabled disabledColor="#fff" border="none"
							v-model="form.vehicleIds"></up-input>
						<template v-slot:right>
							<up-icon name="arrow-right"></up-icon>
						</template>
					</up-form-item>
				</view>
			</up-form>
			<up-picker closeOnClickOverlay :show="showPicker" :columns="columns" keyName="licensePlateNumber"
				title="请选择车辆" @confirm="confirmSelect" @close="showPicker = false"
				@cancel="showPicker = false"></up-picker>
		</view>
		<view class="form_button" style="padding: 0 10px;">
			<up-button type="primary" @click="WithConfirm">提交</up-button>
		</view>
	</view>
	<up-toast ref="uToastRef"></up-toast>
</template>

<script setup>
import {
	ref,
	reactive,
	onMounted
} from "vue"
import {
	getCarList
} from "@/api/car.js"
import {
	SignForWaybill
} from "@/api/driver.js"
import {
	onLoad
} from "@dcloudio/uni-app"

/* 数据 */
const formRef = ref(null)
const uToastRef = ref(null)
const showPicker = ref(false)
// 表单
const form = reactive({
	id: '',
	vehicleId: '',
	text: '接单',
	vehicleIds: undefined,
	goodsCount: ''
})
const rules = reactive({
	'goodsCount': [
		{
			type: 'string',
			required: true,
			message: '请输入接单数量',
			trigger: ['blur', 'change'],

		}, {
			// 使用 pattern 进行正则校验
			pattern: /^\d+(\.\d+)?$/, // 只允许字母和数字
			// 校验前转换，确保是字符串
			message: '用户名只能包含数字和小数点',
			trigger: ['blur', 'change']
		}
	],
	'vehicleIds': {
		type: 'string',
		required: true,
		message: '请选择车辆',
		trigger: ['blur', 'change']
	}
})
// 车辆
const columns = reactive([])
// 传进来的三个参数
const waybillId = ref('')
const driverId = ref('')
const unit = ref('')


/* 函数 */
// 获取车辆列表
const getCars = async () => {
	uToastRef.value.show({
		type: 'loading',
		message: "请稍等...",
		duration: -1
	})
	let res = await getCarList({
		limit: 100
	})
	uToastRef.value.hide()
	if (res.success) {
		columns.push(res.data.list)
	} else {
		uToastRef.value.show({
			type: 'error',
			message: "获取司机车辆失败",
		})
	}
}
// 打开选择车辆框
const selectCar = () => {
	showPicker.value = true
	uni.hideKeyboard()
}
// 确认选择车辆
const confirmSelect = (e) => {
	form.vehicleIds = e.value[0].licensePlateNumber
	form.vehicleId = e.value[0].id
	showPicker.value = false
}
// 提交
const WithConfirm = async () => {
	let valid = await formRef.value.validate()
	if (valid) {
		let regex = /^\d+(\.\d+)?$/
		if (form.goodsCount) {
			if (!regex.test(form.goodsCount)) {
				uToastRef.value.show({
					position: "top",
					message: '货物数量只能为数字加小数点',
					type: 'warning'
				})
				return
			}
		}
		form.id = waybillId.value
		uToastRef.value.show({
			type: 'loading',
			message: "正在提交",
			duration: -1
		})
		let res = await SignForWaybill(form)
		uToastRef.value.hide()
		if (res.success) {
			uToastRef.value.show({
				position: "top",
				type: 'success',
				message: "已接单",
				duration: 1000,
				complete() {
					uni.reLaunch({
						url: '/pages/work/index'
					})
				}
			})
		}
	}
}




/* 钩子 */
onLoad((options) => {
	waybillId.value = options.codeId
	driverId.value = options.driverId
	unit.value = options.unit
	if (options.unit != 0 && options.unit != 15) {
		form.goodsCount = 1
	}
})
onMounted(() => {
	getCars()
})
</script>

<style></style>